{include file="common/header-top" /}

<style>
    .step-span{
        font-size: 14px;
        font-weight: bold;
    }

    .van-cell-li{
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        min-height: 44px;
    }
    .van-cell-li .van-cell__left-icon{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__title span{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__value .van-field{
        background-color: #2aa24512;
        padding: 8px 10px;
        margin-top: 1px;
    }


    .job-detail-title-cell{
        padding: 8px 3px;
    }

    .job-detail-title{
        font-size: 18px;
        font-weight: 500;
    }

    .job-detail-money-cell{
        margin-top: 2px;
    }
    .job-detail-money{
        display: block;
    }
    .job-detail-money span{
        display: block;
        padding: 2% 0%;
    }

    .thirdStep-cell-li .van-cell__title{
        max-width: 26%;
    }


    .article {
        padding-left: 10px;
        padding-right: 10px;
        overflow: auto;
        padding-top: 20px;
    }
    .article img {
        max-width: 100% !important;
    }

</style>


<div id="app"  v-cloak>

    <van-nav-bar title="审核二手商品" left-arrow @click-left="goBack" left-text="返回"></van-nav-bar>

    <van-row>
        <van-col span="24">
            <!--图片轮播-->
            <van-swipe :autoplay="1500" indicator-color="white" :height="180" >
                <van-swipe-item v-for="item in goodsInfo.imageArr" >
                    <van-image :src="item" fit="fill" ></van-image>
                </van-swipe-item>
            </van-swipe>
            <!--图片轮播-->
        </van-col>
    </van-row>

    <div style="padding-bottom: 55px;">
        <van-row>
            <van-col span="24">
                <van-cell :border="false" class="job-detail-title-cell">
                    <span class="van-ellipsis job-detail-title" :title="goodsInfo.name">{{goodsInfo.name}}</span>
                </van-cell>
            </van-col>

            <van-col span="24">
                <van-col span="12" class="job-detail-money-cell">
                    <van-tag plain class="job-detail-money">
                        <span class="money-font" style="font-size: 22px;color: #fe9e39;">{{goodsInfo.money}}元</span>
                    </van-tag>
                </van-col>
                <van-col span="12">
                    <van-cell  icon="/__FRONT__/images/icon/baozhang.png" :border="false">
                        <van-tag slot="default" type="success">平台认证</van-tag>
                    </van-cell>
                </van-col>

            </van-col>

        </van-row>



        <van-divider :style="{borderColor: '#32a14a', padding: '0 2px' }"></van-divider>

        <van-cell :title="getSetp3Location"
                  icon="/__FRONT__/images/icon/location-icon.png"
                  style="padding-top: 0px;"
                  :border="false"
        ></van-cell>


        <van-row>
            <van-cell title="商品信息" icon="/__FRONT__/images/icon/job-detail-icon.png" size="large">
                <van-icon name="arrow-down"></van-icon>
            </van-cell>
            <van-cell title="商品分类:"
                      class="thirdStep-cell-li"
                      icon="/__FRONT__/images/icon/publish-job-money.png"
                      :value="goodsInfo.marketTypeName">
            </van-cell>
            <van-cell title="数量:"
                      class="thirdStep-cell-li"
                      icon="/__FRONT__/images/icon/goods-num.png"
                      :value="goodsInfo.number + '件'">
            </van-cell>
            <van-cell title="商品原价:"
                      class="thirdStep-cell-li"
                      icon="/__FRONT__/images/icon/publish-job-money.png"
                      :value="goodsInfo.oprice + '元'">
            </van-cell>
            <van-cell title="卖家:"
                      class="thirdStep-cell-li"
                      icon="/__FRONT__/images/icon/publish-job-contacts.png"
                      :value="goodsInfo.contacts">
            </van-cell>
            <van-cell title="联系方式:"
                      class="thirdStep-cell-li"
                      icon="/__FRONT__/images/icon/job-detail-mobile.png"
                      :value="goodsInfo.ignoreMobile">
            </van-cell>
            <van-cell title="联系方式[微信]:"
                      class="thirdStep-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-wechat.png"
                      :value="goodsInfo.wechat_num">
            </van-cell>
            <van-cell title="联系方式[QQ]:"
                      class="thirdStep-cell-li"
                      icon="/__FRONT__/images/icon/qq.png"
                      :value="goodsInfo.qq_num">
            </van-cell>
        </van-row>


        <van-row>
            <van-cell title="商品详情" icon="/__FRONT__/images/icon/job-detail-content.png" size="30px">
                <van-icon name="arrow-down"></van-icon>
            </van-cell>
            <van-col span="24">
                <section class="article" >
                    {{goodsInfoExtend.content}}
                </section>
            </van-col>
        </van-row>

    </div>



    <van-row v-show="showOption">
        <van-col span="24">
            <van-goods-action>
                <van-goods-action-button
                        type="danger"
                        color="#f32108"
                        text="审核不通过"
                        style="border-radius: 0px; margin-left: 0px;"
                        @click="clickShowPop"
                >
                </van-goods-action-button>
                <van-goods-action-button
                        type="primary"
                        :text="passText"
                        style="border-radius: 0px; margin-right: 0px;"
                        @click="postAuditGoods(1)"
                >
                </van-goods-action-button>
            </van-goods-action>
        </van-col>
    </van-row>


    <!--错误信息弹窗-->
    <van-popup
            v-model="showErrorPop"
            get-container="#app"
            position="center"
            style="width: 100%;"
            round
    >
        <van-row>
            <van-col span="24" style="text-align: center;">
                <span>审核不通过理由?</span>
            </van-col>
            <van-col span="24">
                <van-cell-group>
                    <van-field
                            v-model="errorMsg"
                            rows="5"
                            type="textarea"
                            autosize
                            placeholder="请输入审核不通过的理由"
                    ></van-field>
                </van-cell-group>
            </van-col>
            <van-divider></van-divider>
            <van-col span="24" style="padding-bottom: 10px">
                <van-button
                        type="warning"
                        style="float: left; margin-left: 20px;"
                        size="small"
                        @click="cancelPassNot"
                >取消</van-button>
                <van-button
                        type="primary"
                        style="float: right; margin-right: 20px;"
                        size="small"
                        @click="confirmPassNot"
                >确定</van-button>
            </van-col>
        </van-row>
        </van-cell-group>
    </van-popup>
    <!--错误信息弹窗-->


</div>



<script>

    Vue.use(vant.Lazyload);
    var vm = new Vue({
        //挂载点
        el: '#app',
        //数据集合
        data() {
            return {

                active:2,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                //详情详情
                goodsInfo: {
                    id: {$id},
                    tid: 0,
                    name: '',
                    logo: '',
                    image: '',
                    typeName: '',
                    oprice: '',
                    extendContent: '',
                    money: '',
                    number: 1,
                    contacts: '',
                    mobile: '',
                    provinces_id: '',
                    city_id: '',
                    county_id: '',
                    address: '',
                    provinces_name: '',
                },
                //商品扩展表
                goodsInfoExtend:{
                    id:0,
                    market_id: {$id},
                    content:''
                },


                showErrorPop: false,

                errorMsg: '',


            }
        },

        //创建时执行 操作
        created : function (){


            //获取二手商品详情
            var params = {
                id: this.goodsInfo.id,
                extend: 'content,publishUser'
            };
            axiosRequest.get('/api/market/goodsDetail',{params:params}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.goodsInfo = response.data;
                    vm.$data.goodsInfo.content = response.data.extendContent.content;
                    vm.$data.goodsInfoExtend = response.data.extendContent;
                    vm.$data.goodsInfo.money = parseFloat(vm.$data.goodsInfo.money);
                    vm.$data.goodsInfo.oprice = parseFloat(vm.$data.goodsInfo.oprice);
                } else {
                    vant.Toast({
                        message: response.msg,
                        onClose: function () {
                            history.back();
                        }
                    });
                }
            });


        },

        mounted(){
        },

        //计算属性
        computed:{
            getLocation(){
                return this.goodsInfo.provinces_name ? this.goodsInfo.provinces_name : '请选择区域';
            },
            getSetp3Location(){
                return this.goodsInfo.provinces_name + ' ' + this.goodsInfo.address;
            },
            getSalePhoneUrl(){
                return 'tel:' + this.goodsInfo.mobile;
            },

            showOption(){
                return (this.goodsInfo.status != 3) ? true : false;
            },
            passText(){
                return (this.goodsInfo.status == 2) ? '审核通过' : '再次审核';
            }

        },



        //方法集合 在 `methods` 对象中定义方法
        methods: {
            //返回上一页
            goBack(){
                history.back();
            },


            clickShowPop(){
                this.showErrorPop = true;
            },

            cancelPassNot(){
                this.showErrorPop = false;
                this.errorMsg = '';
            },
            confirmPassNot(){
                this.showErrorPop = false;
                this.postAuditGoods(2);
            },


            postAuditGoods(status){
                var postData = {
                    goodsId: this.goodsInfo.id,
                    pass: status,
                    message: this.errorMsg
                };
                axiosRequest.post('/api/market/auditGoods', postData).then(function (response) {
                    if (response.code == 200) {
                        vant.Toast('操作成功！');
                        vm.$data.goodsInfo.status = response.data.status;
                    } else {
                        vant.Toast({
                            message: response.msg,
                        });
                    }
                });
            }





        }


    });
</script>

{include file="common/foot-bottom" /}

